<template>
    <el-container>
        <el-header>{{title}}</el-header>
        <el-main>
            <el-row>
                <el-col :span="1"></el-col>
                <el-col :span="22">
                    <div id="dplayer" style="width: 100%"></div>
                    <el-divider />
                    <el-button-group>
                        <el-button type="primary" @click="startLive" :icon="VideoPlay">开始直播</el-button>
                        <el-button type="danger" @click="stopLive" :icon="VideoPause">暂停直播</el-button>
                    </el-button-group>
                </el-col>
                <el-col :span="1"></el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script setup>
import Hls from "hls.js";
import DPlayer from 'dplayer';
import {VideoPause, VideoPlay} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import { useRoute } from 'vue-router';
import {getLive} from "@/api/api.js";

defineOptions({
    name: "LiveDemo"
});

const route = useRoute();
const liveId = route.query.liveId;
const meetingNumber = route.query.meetingNumber;
const password = route.query.password;

const title = ref("")
const pullUrl = ref("")

console.log(route.query)

getLive(route.query).then((res) => {
    title.value = res.data.title;
    pullUrl.value = res.data.pullUrls[0].videoM3u8;
}).catch(() => {
});


let dp = null
onMounted(() => {
    startLive();
})


const startLive = () => {
    dp = new DPlayer({
        container: document.getElementById('dplayer'),
        live: true,
        theme: '#409EFF',
        video: {
            url: pullUrl.value,
            type: 'customHls',
            customType: {
                customHls: function (video, player) {
                    const hls = new Hls();
                    hls.loadSource(video.src);
                    hls.attachMedia(video);
                },
            },
        }
    });
}

const stopLive = () => {
    dp&&dp.pause();
}
</script>

<style scoped>
.el-header {
    display: flex;
    justify-content: center;
    align-items: center
}
</style>
